<template>
  <div>
    <!-- 基础抽屉 -->
    <div class="demo-inner-divider">基础抽屉</div>
    <e-button type="primary" @click="handleClick">打开抽屉</e-button>
    <e-drawer v-model="visible" title="这是标题"  width="400">
      <!-- <div>这是内容</div> -->
      <p class="title">{{ profileData.title }}</p>
      <ul class="info-profile">
        <li v-for="(item,index) in profileData.data" :key="index">
          <p>{{ index }}</p>
          <p>{{ item }}</p>
        </li>
      </ul>

      <p class="title">{{ profileData.title }}</p>
      <ul class="info-profile">
        <li v-for="(item,index) in profileData.data" :key="index">
          <p>{{ index }}</p>
          <p>{{ item }}</p>
        </li>
      </ul>

    </e-drawer>

    <!-- 可操作抽屉 -->
    <div class="demo-inner-divider" style="margin-top:50px">可操作抽屉</div>
    <e-button type="primary" @click="operationVisible1=true">操作抽屉</e-button>
    <e-drawer  v-model="operationVisible1" title="表单操作"  width="512">
      <!-- <div>表单操作</div> -->
      <e-form :model="formData" :inline="false" label-position="top">
        <e-row :gutter="32">
          <e-col span="12">
            <e-form-item label="姓名">
              <e-input v-model="formData.name" placeholder="please enter user name" />
            </e-form-item>
          </e-col>
          <e-col span="12">
            <e-form-item label="类型">
              <e-select v-model="formData.type" placeholder="please select an type">
                <e-option value="PaaS">PaaS</e-option>
                <e-option value="IaaS">IaaS</e-option>
                <e-option value="SaaS">SaaS</e-option>
              </e-select>
            </e-form-item>
          </e-col>
        </e-row>
        <e-row :gutter="32">
          <e-col span="12">
            <e-form-item label="组织">
              <e-select v-model="formData.owner" placeholder="please select an owner">
                <e-option value="jobs">Steven Paul Jobs</e-option>
                <e-option value="ive">Sir Jonathan Paul Ive</e-option>
              </e-select>
            </e-form-item>
          </e-col>
          <e-col span="12">
            <e-form-item label="时间" >
              <e-date-picker v-model="formData.date" type="daterange" placeholder="please select the date" style="display: block" placement="bottom-end"></e-date-picker>
            </e-form-item>
          </e-col>
        </e-row>
        <e-form-item label="描述" >
          <e-input type="textarea" v-model="formData.desc" :rows="4" placeholder="please enter the description" />
        </e-form-item>
      </e-form>
      <div class="footer">
        <e-button @click="handleClose" style="margin-right:20px">取消</e-button>
        <e-button @click="handleClose" type="primary">确定</e-button>
      </div>
    
    </e-drawer>

    <!-- 抽屉方向 -->
    <div class="demo-inner-divider" style="margin-top:50px">抽屉方向</div>
    <e-button type="primary" @click="operationVisible=true">Right</e-button>
    <e-button type="primary" @click="operationVisibleLeft=true">Left</e-button>
    <e-button type="primary" @click="operationVisibleTop=true">Top</e-button>
    <e-button type="primary" @click="operationVisibleBottom=true">Bottom</e-button>
    <e-drawer  v-model="operationVisible" title="right"  width="512">
      <div><p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    </e-drawer>
    <e-drawer  v-model="operationVisibleLeft" title="left" placement="left" width="512">
      <div><p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    </e-drawer>
    <e-drawer  v-model="operationVisibleTop" title="top" placement="top" width="512">
      <div><p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    </e-drawer>
    <e-drawer  v-model="operationVisibleBottom" title="bottom" placement="bottom" width="512">
      <div><p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </div>
    </e-drawer>

    <!-- 遮罩关闭 -->
    <div class="demo-inner-divider" style="margin-top:50px">点击遮罩关闭</div>
    <e-button type="primary" @click="operationVisibleMask=true">遮罩关闭</e-button>
    <e-drawer :maskClosable="true" v-model="operationVisibleMask" title="这是标题"  width="512" >
      <div>点击遮罩关闭</div>
    </e-drawer>



    <!-- 多层抽屉 -->
    <div class="demo-inner-divider" style="margin-top:50px">多层抽屉</div>
    <e-button @click="value1 = true" type="primary">打开抽屉</e-button>
    <e-drawer title="Multi-level drawer" width="512" :closable="true" v-model="value1">
      <e-button @click="value2 = true" type="primary">Two-level Drawer</e-button>
    </e-drawer>
    <e-drawer title="Two-level Drawer" :closable="true" v-model="value2">
      This is two-level drawer.
    </e-drawer>
    
    <!-- 不同尺寸抽屉，可以通过设置不同的width来实现 -->
    <div class="demo-inner-divider" style="margin-top:50px">不同尺寸的抽屉可以通过设置width来实现：小(380)、中(480)、大(580)</div>
    <e-button type="primary" @click="small=true">小尺寸</e-button>
    <e-button type="primary" @click="middle=true">中尺寸</e-button>
    <e-button type="primary" @click="large=true">大尺寸</e-button>
    <e-drawer  v-model="small" title="小尺寸" width="380">
      <p class="title">{{ profileData.title }}</p>
      <ul class="info-profile">
        <li v-for="(item,index) in profileData.data" :key="index">
          <p>{{ index }}</p>
          <p>{{ item }}</p>
        </li>
      </ul>

      <p class="title">{{ profileData.title }}</p>
      <ul class="info-profile">
        <li v-for="(item,index) in profileData.data" :key="index">
          <p>{{ index }}</p>
          <p>{{ item }}</p>
        </li>
      </ul>
    </e-drawer>
    <e-drawer  v-model="middle" title="中尺寸" width="480">
      <p class="title">{{ profileData.title }}</p>
      <ul class="info-profile">
        <li v-for="(item,index) in profileData.data" :key="index">
          <p>{{ index }}</p>
          <p>{{ item }}</p>
        </li>
      </ul>

      <p class="title">{{ profileData.title }}</p>
      <ul class="info-profile">
        <li v-for="(item,index) in profileData.data" :key="index">
          <p>{{ index }}</p>
          <p>{{ item }}</p>
        </li>
      </ul>
    </e-drawer>
    <e-drawer  v-model="large" title="大尺寸" width="580">
      <p class="title">{{ profileData.title }}</p>
      <ul class="info-profile">
        <li v-for="(item,index) in profileData.data" :key="index">
          <p>{{ index }}</p>
          <p>{{ item }}</p>
        </li>
      </ul>

      <p class="title">{{ profileData.title }}</p>
      <ul class="info-profile">
        <li v-for="(item,index) in profileData.data" :key="index">
          <p>{{ index }}</p>
          <p>{{ item }}</p>
        </li>
      </ul>
    </e-drawer>

    <!-- mask -->
    <div class="demo-inner-divider" style="margin-top:50px">设置mask</div>
    <e-button type="primary" @click="maskData=true">遮罩</e-button>
    <e-drawer  v-model="maskData" title="遮罩" :mask="false">
      <p class="title">{{ profileData.title }}</p>
      <ul class="info-profile">
        <li v-for="(item,index) in profileData.data" :key="index">
          <p>{{ index }}</p>
          <p>{{ item }}</p>
        </li>
      </ul>

      <p class="title">{{ profileData.title }}</p>
      <ul class="info-profile">
        <li v-for="(item,index) in profileData.data" :key="index">
          <p>{{ index }}</p>
          <p>{{ item }}</p>
        </li>
      </ul>
    </e-drawer>
    <!-- 可拖拽抽屉 -->
    <div class="demo-inner-divider" style="margin-top:50px">可拖拽抽屉</div>
    <e-button @click="drawerDrag = true" type="primary">打开抽屉</e-button>
    <e-drawer :maskClosable="false" :draggable="true" v-model="drawerDrag" title="这是标题"  width="512" >
      <div>可拖拽抽屉的抽屉</div>
    </e-drawer>
    <drawer-md class="markdown-body" style="margin-top:50px"></drawer-md>
  </div>
</template>

<script>
import drawerMd from '../../docs/drawer.md';
export default {
  components: {
    drawerMd
  },
  data(){
    return{
      visible:false,
      operationVisible:false,
      operationVisibleLeft:false,
      operationVisibleTop:false,
      operationVisibleBottom:false,
      operationVisibleMask:false,
      operationVisible1:false,
      value1:false,
      value2:false,
      drawerDrag:false,
      small:false,
      middle:false,
      large:false,
      maskData:false,
      profileData:{
        title:'请求消息内容',
        data:{
          '查询请求id':'HY23234534253425',
          '执行流水号':'123453456',
          '渠道编号':'234545454',
          '请求时间':'2029-08-31 11:30:15',
          '当前编码':'562402'
        }
      },
      formData: {
        name: '',
        type: '',
        date: '',
        desc: ''
      },
    }
  },
  methods:{
    handleClick(){
      this.visible=true
    },
    handleClose(){
      this.operationVisible=false
    }
  }
};
</script>
<style scoped>
.footer{
  width:100%;
  padding:10px 16px;
  position:absolute;
  bottom:0;
  left:0;

  border-top:1px solid #e8e8e8;
  text-align: right;
}

.title{
  font-weight:400;
  font-size: 14px;
  padding: 5px;
  color: rgb(31, 31, 33);
}

.info-profile:not(:last-child){
  padding-bottom: 10px;
  border-bottom: 1px solid #E1E5EE;
  margin-bottom: 10px;
}
.info-profile li{
  list-style: none;
  display: flex;
  margin: 5px;
}

.info-profile li :first-child{
  width: 60px;
  text-align: right;
  margin-right: 10px;
}

</style>
